import { useState } from "preact/hooks";
import type { Props } from "./index.ts";
// Brand marks shown inside the card. `fill="currentColor"` lets each icon
// inherit the color set on its container, so they pick up the accent palette.
const FrameworkIcon = ({ className }: { className?: string }) => (
);
const TypeScriptIcon = ({ className }: { className?: string }) => (
);
// Plain HTML/Preact starter block. Props are edited from the editor's Controls
// panel (see the schema in index.ts).
export function {{ block.clsName }}(props: Props) {
{% raw %} const [count, setCount] = useState(props.initialCount);
// Default to a neutral icon color; the color control can override it.
const accent = props.accentColor || "#111827";
// Map the "Button style" control (props.buttonVariant) to styles so the
// selected variant is reflected in the preview.
const variant = {
solid: { background: accent, color: "#ffffff", border: `1px solid ${accent}` },
outline: { background: "transparent", color: accent, border: `1px solid ${accent}` },
ghost: { background: "transparent", color: accent, border: "1px solid transparent" },
}[props.buttonVariant];
return (